<template>
  <div class="admin">
    <!-- container -->
    <el-container class="ad-container">
      <!-- header -->
      <el-header height="60px" class="ad-header sha1 clear-ed">
        <index-header></index-header>
      </el-header>

      <el-container style="min-width: 1000px; background: #fbfbfb">
        <!-- aside -->
        <el-aside width="200px" class="ad-aside sha2">
          <el-row class="margin-top-20">
            <el-col :span="24" class="ad-creat">
              <el-button @click.stop="onShowCreateSiteDialog" class="ad-creat-btn">
                <i class="jy-icon-creation"></i>
                创建作品
              </el-button>
            </el-col>
          </el-row>
          <el-menu :default-active="activeIndex">
            <el-menu-item
              v-show="item.bIsShow"
              v-for="(item, index) in menuList"
              :key="index"
              :index="item.index"
              :data-key="index"
              class="ad-op"
              @click="clickOption($event, item)"
            >
              <!-- <i :class="item.icon"></i> -->
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.text }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- main -->
        <el-main class="ad-content scroll-bar-cls clear-ed">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 创建什么类型的页面？ -->
    <el-dialog title="创建什么类型的页面？" v-model="isDisplayCreateSite" top="25vh">
      <ul class="create-site-con">
        <li v-if="true" @click.stop="onCreateSite(H5_TYPE.mobile)">
          <i class="jy-icon-multiple-page"></i>
          <p>移动端页面</p>
        </li>
        <li v-if="true" @click.stop="onCreateSite(H5_TYPE.pc)">
          <i class="jy-icon-single-page"></i>
          <p>PC端页面</p>
        </li>
        <!-- <li @click.stop="onCreateSite(H5_TYPE.canvas)"><i class="jy-icon-single-page"></i><p>canvas页面</p></li> -->
        <li v-if="bIsCardCreatable" @click.stop="onCreateCardSite(H5_TYPE.card)">
          <i class="jy-icon-wall"></i>
          <p>CardList页面</p>
        </li>
      </ul>
    </el-dialog>

    <!-- site-preview -->
    <site-preview :isVisible="isSitePreview"></site-preview>
    <site-preview-card :isVisible="isSitePreviewCardShow"></site-preview-card>

    <!-- 你确认删除整个站点数据吗？ -->
    <el-dialog
      title="提示"
      v-model="deleteSiteData.isDelete"
      width="30%"
      :show-close="false"
    >
      <span>你确认删除整个站点数据吗？</span>
      <template #footer>
        <span class="dialog-footer delete-site-data">
          <el-button @click.stop.prevent="onCancelDeleteSiteData">取 消</el-button>
          <el-button type="primary" @click.stop.prevent="onDeleteSiteData"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import IndexHeader from "@/views/child/header/index-header.vue";
import SitePreview from "@/views/child/site-preview.vue";
import SitePreviewCard from "@/views/child/site-preview-card.vue";
import { reactive } from "vue";
import { EventBus, getPxOVwByValue } from "@/utils";
import { H5_TYPE } from "@/const";
import { useWebSiteStore } from "@/store/web/site";
import { useWebUserStore } from "@/store/web/user";
import { useWebCardCompStore } from "@/store/web/card-component";
const useWebSite = useWebSiteStore();
const useWebUser = useWebUserStore();
const useWebCardComp = useWebCardCompStore();

export default {
  name: "admin",
  components: {
    IndexHeader,
    SitePreview,
    SitePreviewCard,
  },
  setup() {
    const state = reactive({
      activeIndex: "1",
      bIsSubOpen: true,
      isDisplayCreateSite: false,
      /* 创建页面类型按钮 bIsShow */
      bIsCardCreatable: false, // card create btn
    });
    const state_ = {
      H5_TYPE: H5_TYPE,
      adminType: "ADMINPRODU",
      menuList: [
        {
          icon: "document",
          index: "1",
          type: "ADMINPRODU",
          text: "我的作品",
          router: "/admin/produ",
          bIsShow: true,
        },
        {
          icon: "menu",
          index: "2",
          type: "ADMINTEMP",
          text: "模板列表",
          router: "/admin/temp",
          bIsShow: true,
        },
        {
          icon: "star",
          index: "3",
          type: "ADMINCOLLECT",
          text: "我的收藏",
          router: "/admin/collect",
          bIsShow: false,
        },
        {
          icon: "view",
          index: "4",
          type: "ADMINDATA",
          text: "数据统计",
          router: "/admin/data",
          bIsShow: true,
        },
        {
          // 管理员/开发者可见
          icon: "calendar",
          index: "5",
          type: "ADMINRECORD",
          text: "更新记录",
          router: "",
          link: "http://git.intra.xxx.com/wbcsc_xm/fe/fe-web/wikis/新建页更新记录",
          bIsShow: false,
        },
      ],
    };
    _.merge(state, state_);
    return state;
  },
  computed: {
    isSitePreview() {
      return useWebSite.sitePreview.isActive;
    },
    isSitePreviewCardShow() {
      return useWebCardComp.mgSitePreview.isActive;
    },
    deleteSiteData() {
      return useWebSite.deleteSiteData;
    },
    group() {
      return useWebUser.user.group;
    },
  },
  mounted() {
    // height
    this.handleResize();
    window.addEventListener("resize", this.handleResize, false);

    // this.clickOption();
    EventBus.$off("changeAdminTab");
    EventBus.$on("changeAdminTab", this.changeTab);

    // 初始化获取router 并 set activeIndex
    this.handleRouter4ActiveIndex();
  },
  methods: {
    onCancelDeleteSiteData() {
      useWebSite.updateDeleteSiteData({ isDelete: false, site_id: "" });
    },
    onDeleteSiteData() {
      const site_id = this.deleteSiteData.site_id;
      useWebSite.updateDeleteSiteData({ isDelete: false, site_id: "" });
      const params = { site_id };
      useWebUser.deleteSite(params);
    },
    changeTab(option) {
      //option: { type, site_id }
      this.$router.push({
        path: `/admin/data/${option.site_id}`,
        query: {
          site_id: option.site_id,
        },
      });

      // let index = ''
      // _.forEach(this.menuList, (menu) => {
      //   if(menu.type == type){
      //     index = menu.index
      //   }
      // });
      // this.adminType = type;
      // this.$nextTick(() => {
      //   this.activeIndex = index;
      //   EventBus.$emit("showSiteStatics", { site_id })
      // })
    },
    clickOption(el, item) {
      let that = this;
      that.adminType = item.type;

      // 无 router 则跳 link
      if (typeof item.router != "string" || item.router == "") {
        window.location.href = item.link;
        return;
      }
      if (this.$route.path !== item.router) {
        this.$router.push(item.router);
      }
    },
    onShowCreateSiteDialog() {
      this.isDisplayCreateSite = true;
    },
    onCreateSite(type) {
      useWebSite.createSite({ type, $router: this.$router });
    },
    click2Home() {
      // console.log("home: ", el, this.$store);
      // this.$store.dispatch("components/upload");
      window.location.href = "/home";
    },
    click2ShowSub(el) {
      let that = this;
      let parentEl = el.currentTarget.parentNode;
      // console.log("submenu: ", parentEl.className.indexOf("is-opened"));
      let bIsOpened = parentEl.className.indexOf("is-opened") > -1;
      if (bIsOpened) {
        // todo: close
        that.bIsSubOpen = !that.bIsSubOpen;
      } else {
        // todp: open
        that.bIsSubOpen = !that.bIsSubOpen;
      }
    },
    handleRouter4ActiveIndex() {
      const _herf = window.location.href;
      if (_herf.indexOf("/admin/produ") > -1) {
        this.activeIndex = "1";
      } else if (_herf.indexOf("/admin/temp") > -1) {
        this.activeIndex = "2";
      } else if (_herf.indexOf("/admin/collect") > -1) {
        this.activeIndex = "3";
      } else if (_herf.indexOf("/admin/data") > -1) {
        this.activeIndex = "4";
      }
    },

    /* by group */
    // group 类型 1/2/3
    updateMenuShowByGroup() {
      // 根据 user.group 更新 this.menuList 是否展示
      // 管理员/开发者可见
      this.menuList[4].bIsShow = this.group == 1;
    },
    updateCreateBtnShowByGroup() {
      // 根据 user.group 更新 创建页面类型按钮 是否展示
      this.bIsCardCreatable = this.group == 1 || this.group == 3;
    },

    onCreateCardSite(type) {
      /** 创建 cardlist 站点 **/
      // create cardlist site
      useWebCardComp.createCardSite({
        type: type, // H5_TYPE
      });
    },

    /*  */
    handleResize() {
      let win_Height =
        window.innerHeight ||
        Math.max(document.body.clientHeight, document.documentElement.clientHeight);
      const elContent = document.querySelector(".ad-content");
      const elHeader = document.querySelector(".index-header-layout");
      if (elHeader && elContent) {
        elContent.style.height = getPxOVwByValue(win_Height - elHeader.offsetHeight);
      }
    },
  },
  watch: {
    "$route.path"() {
      // 监听router变化 并 set activeIndex
      this.handleRouter4ActiveIndex();

      // // 可视化展示组件点击数 set state.isDisplayClickStatics
      // let isDisplayClickStatics = false
      // if(to.indexOf('/admin/data') > -1){
      //   isDisplayClickStatics = true
      // }else{
      //   isDisplayClickStatics = false
      // }
      // this.$store.commit("user/updataIsDisplayClickStatics", {isDisplayClickStatics})
    },
    group: {
      immediate: true,
      handler() {
        // 根据 user.group 更新 this.menuList 是否展示
        this.updateMenuShowByGroup();

        // 根据 user.group 更新 创建页面类型按钮 是否展示
        this.updateCreateBtnShowByGroup();
      },
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/admin.scss";
@import "@/assets/scss/common.scss";
@import "@/assets/scss/admin-data.scss";
</style>
